<html>

<head>
    <link rel="stylesheet" href="style.css">
    <style></style>
    <script type="module" src="jumps.js"></script>
</head>

<body>
    <div class="back hide">
        <div class="circle">
            返回
        </div>
    </div>
    <div class="col">
        <h2>动态模糊效果</h2>

        <!---->
        <p>
            <pre>根据运动对目标合成/图像内容进行模糊。
        
根据此元素的位置变化和缩放变化对输入进行模糊。
还可以通过设置<property query="motionsource">运动源</property>来创建更加自定义的模糊。</pre>
        </p>
        <h4>属性</h4>
        <hr>
        <!---->
        <dl>
            <dt>通用元素属性</dt>
            <dd>
                <p>参见 <a href="local://customization_general">通用属性</a>。</p>
            </dd>

            <hr>

            <dt id="blendmodecontent">内容混合模式</dt>
            <dd>
                <p>用于显示原始内容（模糊之前）的混合模式。在设置了<property query="showunblurredcontent">显示未模糊内容</property>或<property
                        query="showunblurredcontentunder">在下方显示未模糊内容</property>时使用。</p>
            </dd>
            <dt id="color">颜色</dt>
            <dd>
                <p>模糊的色调。</p>
            </dd>
            <dt id="targetimage">目标图像/图层</dt>
            <dd>
                <p>指定用作输入的图像或合成。</p>
            </dd>
            <dt id="showunblurredcontent">显示未模糊内容</dt>
            <dd>
                <p>在模糊上方显示原始内容（模糊之前）。</p>
            </dd>
            <dt id="showunblurredcontentunder">在下方显示未模糊内容</dt>
            <dd>
                <p>在模糊下方显示原始内容（模糊之前）。</p>
            </dd>

            <hr>
            <dt id="bluramountmultiplier">模糊量倍增器</dt>
            <dd>
                <p>模糊的程度。</p>
            </dd>
            <dt id="motionsource">运动源</dt>
            <dd>
                <p>指定用于获取运动的方式。<br><br>
                    <value id="effecttransform">图层变换</value> - 从此元素的<property query="position">位置</property>
                    和<property query="scale">缩放</property>(参见<a href="local://customization_general">通用属性</a>)中获取。<br>
                    <value id="manual">手动</value> - 手动设置方向和缩放。
                </p>
                <!--2-->
                <div class="pborder">
                    <h6>手动</h6>
                    <dl>
                        <dt id="posbluramount">位置模糊程度</dt>
                        <dd>
                            <p>控制位置运动的模糊程度。</p>
                        </dd>
                        <dt id="scalebluramount">缩放模糊程度</dt>
                        <dd>
                            <p>控制缩放/缩放运动的模糊程度。</p>
                        </dd>
                    </dl>
                </div>
                <!--2-->
            </dd>

            </dd>
            <dt id="relativemotionmode">相对运动模式</dt>
            <dd>
                <p>当<property query="motionsource">运动源</property>设置为<property query="manual">手动</property>
                    时很有用，因为变量通常输出绝对值。</p>
                <div class="tip">
                    <pre>假设变量输出是1 -20 60 100，
在绝对运动模式下，模糊的位置会被设置为1 -20 60 100，但这是从屏幕开始计算的
也就是说0代表处于屏幕左下角（或者左上角）

而相对运动模式下，上面的位置是相对于图层本身位置的
也就是说0代表处于图层中心</pre>
                </div>
            </dd>
        </dl>
        <!---->
    </div>


    <style media="screen" type="text/css">
        .container {
            width: 100%;
        }

        .container div {
            width: 100%;
        }

        .container .header {
            padding: 2px;
            cursor: pointer;
        }

        .container .content {
            display: none;
        }
    </style>


</body>
<script>
    // 获取当前页面的 URL
    const url = window.location.href;
    
    // 查找 URL 中的片段标识符
    const fragmentIndex = url.indexOf('#');
    
    if (fragmentIndex !== -1) {
        // 提取片段标识符后的内容
        const targets = decodeURI(url.substring(fragmentIndex + 1)).split(' ');
        for (const value of targets) {
            let target = document.getElementById(value)
            target.classList.remove('blink')
            target.classList.add('blink')
            setTimeout(() => target.classList.remove('blink'), 1400)
            if (index == 0)
                target.scrollIntoView()
        }
    
    } else {
        console.log('No fragment in URL.');
    }
    function isElementInViewport(element) {
        const rect = element.getBoundingClientRect();
        return (
          rect.top >= 0 &&
          rect.left >= 0 &&
          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
          rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
      }
    
    var hide
    
    for (const value of document.querySelectorAll('property')) {
        value.addEventListener('click', (event) => {
            let top = document.body.scrollTop
            console.log(top)
            document.querySelector('.back').classList.remove('hide')
            clearTimeout(hide)
            hide = setTimeout(() => document.querySelector('.back').classList.add('hide'), 5000)
            document.querySelector('.back').addEventListener('click', () => {
                document.body.scrollTop = top
                document.querySelector('.back').classList.add('hide')
            })  
    
            let ids = event.target.getAttribute('query').split(' ')
            for (let index = 0; index < ids.length; index++) {
                const id = ids[index];
                let target = document.getElementById(id)
                target.classList.remove('blink')
                target.classList.add('blink')
                setTimeout(() => target.classList.remove('blink'), 1400)
                if (index == 0&&!isElementInViewport(target))
                    target.scrollIntoView()
            }
        })
    }</script>
</html>